<script>
// import HeaderPage from "@/components/headerPage.vue";
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css'
import {getBanner, getCourse, getliveCourseInfo} from "@/api";
import FooterPage from "@/components/footerPage.vue";
import CoursePage from "@/components/coursePage.vue";
import BoutiquePage from "@/components/boutiquePage.vue";
import DiscountPage from "@/components/discountPage.vue";

export default {
  name: "indexPage",
  components: {DiscountPage, BoutiquePage, CoursePage, FooterPage},
  data() {
    return {
      ArticleList: '',
      discountList: '',
      // 免费课程列表
      boutiquecourseList: '',
      // 免费课程列表
      freecourseList: '',
      quarycourse: {
        pageSize: 5,
        pageNum: 1,
        type: ''
      },
      quaryLive: {
        pageSize: 4,
        pageNum: 1
      },
      liveinfoList: [],
      // 轮播图列表
      swiperList: '',
      swiper: null,
    }
  },
  mounted() {
    this.getSwiper()
    this.getbannerList()
    this.getLivelist()
    // 免费课程
    this.getfreeCourse()
    //精品课程
    this.getboutiqueCourse()
    this.getdiscountCourse()
    // this.getArticleList()
  },

  methods: {
    // 获取头条精选
    // getArticleList() {
    //   const querya = {
    //     pageNum: 1,
    //     pageSize: 5
    //   }
    //   getArticle(querya).then(res => {
    //     console.log(res)
    //   })
    // },
    // 获取免费课程列表
    getdiscountCourse() {
      this.quarycourse.type = 'discount'
      getCourse(this.quarycourse).then(res => {
        this.discountList = res.rows
      })
    },
    // 获取免费课程列表
    getfreeCourse() {
      this.quarycourse.type = 'free'
      getCourse(this.quarycourse).then(res => {
        this.freecourseList = res.rows
      })
    },
    // 获取精品课程列表
    getboutiqueCourse() {
      this.quarycourse.type = 'boutique'
      getCourse(this.quarycourse).then(res => {
        this.boutiquecourseList = res.rows
      })
    },
    // 获取直播课程列表
    getLivelist() {
      getliveCourseInfo(this.quaryLive).then(res => {
        this.liveinfoList = res.rows
      })
    },
    // 获取背景图
    getbannerList() {
      getBanner().then(res => {
        this.swiperList = res.data
      })
    },
    getSwiper() {
      this.swiper = new Swiper(".swiper-container", {
        loop: true, // 无缝
        autoplay: { //自动开始
          delay: 3000, //时间间隔
          disableOnInteraction: false, //*手动操作轮播图后不会暂停*
        },
        paginationClickable: true,
        slidesPerView: 1, // 一组三个
        spaceBetween: 30, // 间隔
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true, // 分页器可以点击
        },
      })
    },
  }

}
</script>

<template>
  <div class="index-main">
    <!--    <header-page></header-page>-->
    <!--背景图-->
    <div class="back-box"></div>
    <!--轮播图-->
    <div class="banner-box">
      <div style="background-color: #fff;">
        <div class="banshi">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div v-for="item in swiperList" :key="item.id" class="swiper-slide"
                   :style="`background-image:url(${item.imgUrl})`">
              </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>
      </div>

    </div>
    <!-- VIP-->
    <div class="vip-box">
      <img
          style="margin-right: 20px"
          src=""
          alt="" srcset="">
      <span style="margin: 0">仅需198即可观看所有付费课程</span>
      <button style="margin-left: 20px">开通VIP</button>
    </div>
    <!--直播课程 课程榜单-->

    <!--免费课程-->
    <div class="freecourse-box">
      <!--头部内容-->
      <header>
        <img
            class="title-icon"
            src=""
            alt="" srcset="">
        <span class="title-course">免费课程</span>
        <span class="more-course">更多></span>
      </header>
      <!--课程列表-->
      <div class="course-list">
        <course-page :freecourseList=freecourseList></course-page>
      </div>
    </div>
    <!--精品课程-->
    <div class="freecourse-box">
      <!--头部内容  boutique-->
      <header>
        <img
            class="title-icon"
            src=""
            alt="" srcset="">
        <span class="title-course" style="margin-right: 0">精品课程</span>
        <img src="https://course.myhope365.com/img/vip-free.aa229615.png"
             style="cursor: pointer;margin-left: 0px;width: 93px;" alt="" srcset="">
        <span class="more-course">更多></span>
      </header>
      <!--课程列表-->
      <div class="course-list">
        <boutique-page :boutiquecourseList="boutiquecourseList"></boutique-page>
      </div>
    </div>
    <!--限时折扣课程-->
    <div class="freecourse-box">
      <!--头部内容  boutique-->
      <header>
        <img
            class="title-icon"
            src=""
            alt="" srcset="">
        <span class="title-course" style="margin-right: 0">限时折扣课程</span>
        <img src="https://course.myhope365.com/img/vip-free.aa229615.png"
             style="cursor: pointer;margin-left: 0px;width: 93px;" alt="" srcset="">
        <span class="more-course">更多></span>
      </header>
      <!--课程列表-->
      <div class="course-list">
        <discount-page :discountList="discountList"></discount-page>
      </div>
    </div>
    <!--头条精选-->
    <div class="freecourse-box">
      <!--头部内容-->
      <header>
        <img
            class="title-icon"
            src=""
            alt="" srcset="">
        <span class="title-course">头条精选</span>
        <span class="more-course">更多></span>
      </header>
      <!--课程列表-->
      <div class="course-list">
        <course-page :freecourseList=freecourseList></course-page>
      </div>
    </div>
    <!--底部组件引用-->
    <footer-page></footer-page>
  </div>
</template>

<style scoped lang="less">
.course-list {
  ul {
    display: flex;
  }
}

.freecourse-box {
  header {
    .more-course {
      margin-right: 0;
      font-size: 16px;
      line-height: 34px;
      margin-left: auto;
      color: #999;
    }

    .title-course {
      margin-left: 0;
      font-weight: 600;
    }

    .title-icon {
      width: 38px !important;
      margin-right: 15px;
      margin-left: 0;
    }

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 24px;
    padding: 0 12px 10px 0;
    border-bottom: 2px solid #e8e8e8;
  }

  width: 1160px;
  background: #fff;
  padding: 30px 20px;
  margin: 15px auto 0;
  border-radius: 20px;
}

* {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.vip-box {
  button {
    margin-left: 3%;
    width: 72px;
    height: 26px;
    background: #6e421a;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
    border-radius: 18px;
    border: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
  }

  span {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333;
  }

  width: 1160px;
  margin-top: 22px;
  height: 50px;
  background-image: url("https://course.myhope365.com/img/vip-line.f590fe35.png");
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 30px;
}

.index-main {
  background: #edf1f7;
}

.banshi {
  border-radius: 10px;
  padding: 16px;
  width: 1160px;
  margin: 0 auto;

  .swiper-slide {
    position: relative;
    //width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #F7F8FA;

    .el-button {
      z-index: 2;
    }
  }
}

.banner-box {
  //min-width: 100%;
  background: #fff;
  border-radius: 8px;
  //padding: 16px;
  width: 1160px;
  margin: -50px auto 0;
}

.back-box {
  width: 100%;
  height: 295px;
  background-size: 100% 100%;
  background-image: url("https://course.myhope365.com/img/index-top-bg.564836d0.png");
}
</style>
